<template>
	<view class="page-container">
		<u-dropdown ref="dropdown" @open="handleOpen" style="background-color: #000;color: #fff;">
			<u-dropdown-item v-model="hospital" title="医院" :options="options1"></u-dropdown-item>
			<u-dropdown-item v-model="screeningTime" title="筛查时间"></u-dropdown-item>
			<u-dropdown-item v-model="warningLevel" title="预警等级" :options="options3"></u-dropdown-item>
		</u-dropdown>
		<!-- 列表区域（带复选框、用户信息） -->
		<view class="list-wrapper">
			<uni-list :border="true">
				<uni-list-item v-for="(item, idx) in listData" :key="idx" :border="true" style="height: 200rpx;position: relative;">
						<!-- 左侧复选框 -->
						<template v-slot:header>
							<u-checkbox v-model="item.checked" @change="(val) => handleCheck(val, idx)"></u-checkbox>
							<view class="flex">
								<view>姓名: {{ item.name }}</view>
								<view>量表: {{ item.scale }}</view>
							</view>
						</template>
						<!-- 右侧信息区域 -->
						<template v-slot:body>

							<view class="flex2">
								<view>医院: {{ item.hospital }}</view>
								<view>疾病等级: {{ item.diseaseLevel }}</view>

							</view>
						</template>
						<template v-slot:footer>
							<view style="position: absolute;right: 30rpx;bottom: 0;">筛查时间: {{ item.screenTime }}</view>
						</template>
				</uni-list-item>
			</uni-list>
		</view>

		<!-- 底部操作栏（全选、分页、预约） -->
		<view class="bottom-bar">
			<u-button @click="toggleSelectAll">全选</u-button>
			<u-button @click="goPrevPage">上一页</u-button>
			<view class="page-text">{{ currentPage }}/{{ totalPages }}</view>
			<u-button @click="goNextPage">下一页</u-button>
			<u-button @click="handleReservation">预约</u-button>
		</view>

		<u-calendar v-model="show" mode="range" @change="changeDateRange">
			<template v-slot:tooltip>
				<view class="title">
					请选择筛查时间
				</view>
			</template>
		</u-calendar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		wxBindPhoneToInternet,
		wxLoginByToken,
		loginByPhoneAndAccount,
		getHospitalList,
	} from '../../apis/api';
	const hospital = ref('')
	const screeningTime = ref('')
	const warningLevel = ref('')
	const show = ref(false)
	const dropdown = ref(null) // 添加dropdown的ref

	const options1 = [{
		value: '1',
		label: '医院1'
	}, {
		value: '2',
		label: '医院2'
	}, {
		value: '3',
		label: '医院3'
	}, {
		value: '4',
		label: '医院4'
	}, {
		value: '5',
		label: '医院5'
	}]
	const options3 = [{
		value: '1',
		label: '全部'
	}, {
		value: '2',
		label: '轻度'
	}, {
		value: '3',
		label: '中度'
	}, {
		value: '4',
		label: '重度'
	}, ]
	// 获取医院列表

	const getHospitalData = async () => {
		const res = await getHospitalList()
		console.log(res)
	}
	const handleOpen = (index) => {
		// 当打开第二个下拉项（索引为1）时
		if (index === 1) {
			show.value = true
			// 关闭下拉菜单
			dropdown.value.close()
		}
	}

	const changeDateRange = (e) => {
		// screeningTime.value = e[0] + '至' + e[1]
		console.log(e)
	}
	// 列表数据（模拟，实际需从接口获取）
	const listData = ref([{
			name: 'XXXX',
			scale: 'XXXXXXXXXXXX',
			hospital: 'XXXXXXXXXXXX',
			diseaseLevel: '轻度',
			screenTime: '2025年09月19日 16:49:30',
			checked: false, // 复选框选中状态
		},
		{
			name: 'XXXX',
			scale: 'XXXXXXXXXXXX',
			hospital: 'XXXXXXXXXXXX',
			diseaseLevel: '轻度',
			screenTime: '2025年09月19日 16:49:30',
			checked: false,
		},
	]);

	// 分页相关数据
	const currentPage = ref(1); // 当前页
	const totalPages = ref(10); // 总页数

	// 处理复选框选择
	const handleCheck = (isChecked, index) => {
		// 更新选中状态
		listData.value[index].checked = isChecked;
	};

	// 全选/取消全选
	const toggleSelectAll = () => {
		const isAllSelected = listData.value.every((item) => item.checked);
		listData.value.forEach((item) => {
			item.checked = !isAllSelected;
		});
	};

	// 上一页
	const goPrevPage = () => {
		if (currentPage.value > 1) {
			currentPage.value--;
			// 实际项目中：调用接口获取当前页数据，替换 listData.value
			console.log('上一页，当前页：', currentPage.value);
		}
	};

	// 下一页
	const goNextPage = () => {
		if (currentPage.value < totalPages.value) {
			currentPage.value++;
			// 实际项目中：调用接口获取当前页数据，替换 listData.value
			console.log('下一页，当前页：', currentPage.value);
		}
	};

	// 预约逻辑
	const handleReservation = () => {
		// 筛选已选中的项
		const selectedItems = listData.value.filter((item) => item.checked);
		if (selectedItems.length === 0) {
			uni.showToast({
				title: '请选择需要预约的项目',
				icon: 'none',
			});
			return;
		}
		// 实际项目中：调用预约接口，传入 selectedItems
		console.log('预约选中的项目：', selectedItems);
	};
	onMounted(() => {
		// 获取医院列表	
		getHospitalData()
	})
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		padding: 20rpx 0 0 0;
	}

	.page-container {

		height: 100vh;
		background-color: #fff;
	}

	.list-wrapper {
		height: 88vh;
		overflow-y: auto;
		padding: 10rpx;
	}



	.flex {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-self: center;
		height: 100rpx;
		width: 48%;
	}

	.flex2 {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-self: center;
		height: 100rpx;
	}

	.bottom-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 15rpx;
		border-top: 1rpx solid #eee;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.page-text {
		margin: 0 20rpx;
	}

	::v-deep .uni-list-item__container {
		justify-content: space-between;
		padding: 20rpx;
		height: 200rpx;
		font-size: 26rpx;
	}
</style>